<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="com.etc.controller.Counter"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">
	function checkfintroduction() {
		var fexperience = document.getElementById("addfintroduction").value;
		if (fexperience == "") {
			document.getElementById("addfintroduction1").innerHTML = "<font color='red'>不能为空<font>";
			return false;
		} else {
			document.getElementById("addfintroduction1").innerHTML = "<font color=''>自我介绍<font>";
			return true;
		}
	}
	function checkfrecepettype() {
		var fexperience = document.getElementById("addfrecepettype").value;
		if (fexperience == "") {
			document.getElementById("addfrecepettype1").innerHTML = "<font color='red'>不能为空<font>";
			return false;
		} else {
			document.getElementById("addfrecepettype1").innerHTML = "<font color=''>接收类型<font>";
			return true;
		}
	}
	function checkfservices() {
		var fexperience = document.getElementById("addfservices").value;
		if (fexperience == "") {
			document.getElementById("addfservices1").innerHTML = "<font color='red'>不能为空<font>";
			return false;
		} else {
			document.getElementById("addfservices1").innerHTML = "<font color=''>服务细则<font>";
			return true;
		}
	}
	function checkfexperience() {
		var reg1 = new RegExp("^[1-9]\d*|0$");
		var fexperience = document.getElementById("fexperience0").value;
		var flag1 = reg1.test(fexperience);
		if (fexperience == "") {
			document.getElementById("fexperience1").innerHTML = "<font color='red'>不能为空<font>";
			return false;
		} else if (flag1) {
			document.getElementById("fexperience1").innerHTML = "<font color=''>养宠经验<font>";
			return true;
		} else {
			document.getElementById("fexperience1").innerHTML = "<font color='red'>请输入年数<font>";
			return false;

		}
	}
</script>

<title>home</title>
<jsp:include page="header.jsp"></jsp:include>
</head>
<body>
	<!--start-home-->
	<div id="home" class="header">
		<!-- 顶部导航栏 -->
		<jsp:include page="topbar.jsp"></jsp:include>
		<!-- 顶部导航栏结束 -->

		<div class="banner">
			<div class="container">
				<ul id="flexiselDemo3">
					<li>
						<div class="biseller-column">
							<a class="lightbox" href="#goofy1"> <img src="images/s1.jpg" />
							</a>
							<div class="lightbox-target" id="goofy1">
								<img src="images/s1.jpg" /> <a class="lightbox-close" href="#">
								</a>

								<div class="clearfix"></div>
							</div>
						</div>
					</li>
					<li>
						<div class="biseller-column">
							<a class="lightbox" href="#goofy2"> <img src="images/s4.jpg" />
							</a>
							<div class="lightbox-target" id="goofy2">
								<img src="images/s4.jpg" /> <a class="lightbox-close" href="#">
								</a>

								<div class="clearfix"></div>
							</div>
						</div>
					</li>
					<li>
						<div class="biseller-column">
							<a class="lightbox" href="#goofy3"> <img src="images/s7.jpg" />
							</a>
							<div class="lightbox-target" id="goofy3">
								<img src="images/s7.jpg" /> <a class="lightbox-close" href="#">
								</a>

								<div class="clearfix"></div>
							</div>
						</div>
					</li>
					<li>
						<div class="biseller-column">
							<a class="lightbox" href="#goofy4"> <img src="images/s6.jpg" />
							</a>
							<div class="lightbox-target" id="goofy4">
								<img src="images/s6.jpg" /> <a class="lightbox-close" href="#">
								</a>

								<div class="clearfix"></div>
							</div>
						</div>
					</li>
					<li>
						<div class="biseller-column">
							<a class="lightbox" href="#goofy5"> <img src="images/s4.jpg" />
							</a>
							<div class="lightbox-target" id="goofy5">
								<img src="images/s4.jpg" /> <a class="lightbox-close" href="#">
								</a>

								<div class="clearfix"></div>
							</div>
						</div>
					</li>
					<li>
						<div class="biseller-column">
							<a class="lightbox" href="#goofy6"> <img src="images/s5.jpg" />
							</a>
							<div class="lightbox-target" id="goofy6">
								<img src="images/s5.jpg" /> <a class="lightbox-close" href="#">
								</a>

								<div class="clearfix"></div>
							</div>
						</div>
					</li>
					<li>
						<div class="biseller-column">
							<a class="lightbox" href="#goofy7"> <img src="images/s3.jpg" />
							</a>
							<div class="lightbox-target" id="goofy7">
								<img src="images/s3.jpg" /> <a class="lightbox-close" href="#">
								</a>
								<div class="clearfix"></div>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<script type="text/javascript">
				$(window).load(function() {
					$("#flexiselDemo3").flexisel({
						visibleItems : 3,
						animationSpeed : 1000,
						autoPlay : true,
						autoPlaySpeed : 3000,
						pauseOnHover : true,
						enableResponsiveBreakpoints : true,
						responsiveBreakpoints : {
							portrait : {
								changePoint : 480,
								visibleItems : 3
							},
							landscape : {
								changePoint : 640,
								visibleItems : 3
							},
							tablet : {
								changePoint : 768,
								visibleItems : 3
							}
						}
					});

				});
			</script>
			<script type="text/javascript"
				src="${pageContext.request.contextPath}/frontdevel/js/jquery.flexisel.js"></script>
		</div>
	</div>
	<!--about-->
	<div class="about">
		<div class="container">
			<div class="about-head">
				<h3>Appointment Foster Care</h3>
				<p>We have over 10000 foster family, When you travel on
					business, Let your pet live as if he was at home. Let me to bring
					up your little baby.</p>
				<h5>Please login before placing an order.</h5>
			</div>
			<div class="cat-info-section">
				<form class="layui-form">
					<div class="layui-form-item">
						<label class="layui-form-label">Nickname</label>
						<div class="layui-input-block">
							<input type="text" name="opetname" lay-verify="required"
								placeholder="Enter pet nickname" autocomplete="off"
								class="layui-input" id="opetname">
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">Pet_type</label>
						<div class="layui-input-block">
							<select name="opettype" id="opettype" lay-verify="required">
								<option value="0">dog</option>
								<option value="1">cat</option>
								<option value="2">Other pets</option>

							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<label class="layui-form-label">Pet_status</label>
						<div class="layui-input-block">
							<select name="opetstatus" id="opetstatus" lay-verify="required">
								<option value="1">In good condition</option>
								<option value="0">ill</option>

							</select>
						</div>
					</div>
					<div class="layui-form-item">
						<div class="layui-block">
							<label class="layui-form-label">StartDate</label>
							<div class="layui-input-inline" style="margin-left: 30px">
								<input type="text" name="ostdate" id="date" autocomplete="off"
									class="layui-input" lay-verify="ostdate" readonly>
							</div>
						</div>
						<div class="layui-inline" style="margin-left: -400px">
							<label class="layui-form-label">EndDate</label>
							<div class="layui-input-inline">
								<input type="text" name="oenddate" id="date1" autocomplete="off"
									class="layui-input" lay-verify="oenddate" readonly>
							</div>
						</div>
					</div>
					<div class="layui-form-item" style="display: none">
						<label class="layui-form-label">Deposit</label>
						<div class="layui-input-block">
							<input type="text" name="odeposit" autocomplete="off"
								readonly="readonly" class="layui-input" id="odeposit">
						</div>
					</div>

					<div class="layui-form-item">
						<input class="layui-btn layui-btn-normal" value="submit"
							id="orderadd" type="button">
						<button type="reset" class="layui-btn layui-btn-normal">reset</button>
					</div>
			</div>
			</form>
			<div class="clearfix"></div>
		</div>
	</div>
	</div>
	<!--//about-->
	<!--gallery-->
	<div class="gallery">
		<div class="container">
			<div class="gallery-head">
				<h3>Excellent Foster Families</h3>
				<p>On our platform, there are many excellent foster families.
					You can also choose your favorite foster families and foster your
					pets to them.</p>
			</div>
			<div class="portfolio-bottom">
				<div class="gallery-one" id="showallfosterfamily">
					<div class="col-md-3 gallery-left">
						<div>
							<a href="images/g1.jpg"
								class=" mask b-link-stripe b-animate-go   swipebox"
								title="Image Title"> <img src="images/g1.jpg" alt=""
								class="img-responsive zoom-img" />
							</a>
						</div>
						<div class="gallery-head">
							<a href="index.jsp"><h4>Foster Families</h4></a>
						</div>
					</div>
					<div class="col-md-3 gallery-left">
						<div>
							<a href="images/g2.jpg"
								class=" mask b-link-stripe b-animate-go   swipebox"
								title="Image Title"> <img src="images/g2.jpg" alt=""
								class="img-responsive zoom-img" />
							</a>
						</div>
						<div class="gallery-head">
							<a href="index.jsp"><h4>Foster Families</h4></a>
						</div>
					</div>
					<div class="col-md-3 gallery-left">
						<div>
							<a href="images/g4.jpg"
								class=" mask b-link-stripe b-animate-go   swipebox"
								title="Image Title"> <img src="images/g4.jpg" alt=""
								class="img-responsive zoom-img" />
							</a>
						</div>
						<div class="gallery-head">
							<a href="index.jsp"><h4>Foster Families</h4></a>
						</div>
					</div>
					<div class="col-md-3 gallery-left">
						<div>
							<a href="images/g3.jpg"
								class=" mask b-link-stripe b-animate-go   swipebox"
								title="Image Title"> <img src="images/g3.jpg" alt=""
								class="img-responsive zoom-img" />
							</a>
						</div>
						<div class="gallery-head">
							<a href="index.jsp"><h4>Foster Families</h4></a>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
			<div class="gallery-foot" style="top: 30px; left: 1110px;">
				<a href="fosterFamily.jsp" style="left: 200px; font-size: 24px;"><h4>More...</h4></a>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		 $(function () {
			    initLayPage();
			});

			/**
			 * 初始化layui分页
			 */

			function initLayPage(pageConf) {
			    if(!pageConf){
			        pageConf ={};
			        pageConf.pageSize = 4;
			        pageConf.currentPage = 1;
			        
			    }
			    $.get("../fosterFamilyBypage1?content=1&page="+pageConf.currentPage+"&limit="+pageConf.pageSize, function (data) {
			        layui.use(['laypage', 'layer'], function () {
			            var page = layui.laypage;  
			            page.render({
			                elem: 'demo7', 
			                count: data.count,
			                curr: pageConf.currentPage,
			                limit: pageConf.pageSize,
			                first:"首页",
			                last:"尾页",
			                layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
			                jump: function (obj, first) {
			                    if (!first) {
			                        pageConf.currentPage = obj.curr;
			                        pageConf.pageSize = obj.limit;
			                        initLayPage(pageConf);
			                    }
			                }
			            });
			            fillTable(data.data,(pageConf.currentPage - 1) * pageConf.pageSize); //页面填充
			        })
			    });
			}
			//填充表格数据
			function fillTable(data,num) {
			    var info = '';
			    $.each(data, function (index, obj) {
			        // id 很多时候并不是连续的，如果为了显示比较连续的记录数，可以这样根据当前页和每页条数动态的计算记录序号
			        index = index +num+1;
				info +="<div class='col-md-3 gallery-left'>"
				+"<div style='width: 300px; height: 350px;'>"
				+"<a href='fosterFamilyDetails.jsp?name="+obj.uname+"&url="+obj.fenvimageurl+"&add="+obj.uaddress+"&type="+obj.frecepettype+"&content="+obj.fservices+"'"
				+"	class=' mask b-link-stripe b-animate-go   swipebox'"
				+"	title='Image Title'> <img src='/ima/"+obj.fenvimageurl+"'"
				+"	class='img-responsive zoom-img' style='width: 300px; height: 350px;margin-left: 30px;'/>"
				+"</a>"
			+"</div>"
			+"<div class='gallery-head'>"
			+"	<a href='fosterFamilyDetails.jsp?name="+obj.uname+"&url="+obj.fenvimageurl+"&add="+obj.uaddress+"&type="+obj.frecepettype+"&content="+obj.fservices+"'><h4 style='font-size:24px;'>"+obj.uname+"</h4></a>"
			+"</div>"
		+"</div>";
			    });
			    $("#showallfosterfamily").html(info);
			}
		
	</script>
	<!-- 申请寄养家庭 -->
	<div class="gallery-applybtn">
		<button
			class="layui-btn layui-btn-normal layui-btn-lg layui-btn-radius"
			id="applybtn">You can click me to be foster family</button>
	</div>
	<!-- 申请寄养家庭 -->
	<!--swipebox -->
	<link rel="stylesheet"
		href="${pageContext.request.contextPath}/frontdevel/css/swipebox.css">
	<script src="js/jquery.swipebox.min.js"></script>
	<script type="text/javascript">
		jQuery(function($) {
			$(".swipebox").swipebox();
		});
	</script>
	<!--//swipebox Ends -->
	<!--/start-footer-->

	<!--/adoption-->

	<!----family--->
	<div class="c-family">
		<div class="container">
			<div class="family-top">
				<h3>Pet Family !!</h3>
				<p>Lorem Ipsum is simply dummy text of the printing and
					typesetting industry.Lorem Ipsum has been the industry's standard
					dummy text ever since, Lorem Ipsum has been the industry's standard
					dummy text ever since the 1500s.</p>
				<a class="read two" href="fosterFamily.jsp">Read More</a>
			</div>
		</div>
	</div>
	<!-- 添加按钮弹出层 -->
	<div class="layui-row" id="adduserinfo" style="display: none;">
		<div class="layui-col-md11">
			<form class="layui-form" action="" id='addmyform'
				enctype="multipart/form-data">
				<div class="layui-form-item" style="display: none;">
					<label class="layui-form-label" style="width: 118px">主键编号</label>
					<div class="layui-input-inline" style="margin: left:30px;">
						<input type="text" name="fid" class="layui-input" id="adduserName"
							value="" style="width: 212px">
					</div>
				</div>
				<div class="layui-form-item" style="display: none;">
					<label class="layui-form-label" style="width: 118px"
						id="addfuidlabel">寄养家庭编号</label>
					<div class="layui-input-inline">
						<input type="text" name="fuid" class="layui-input" id="addfuid"
							value="${user.uid}" style="width: 212px" placeholder="请输入寄养家庭编号">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label" style="width: 118px"
						id="addfintroduction1">自我介绍</label>
					<div class="layui-input-inline">
						<textarea placeholder="请输入自我介绍" class="layui-textarea"
							name="fintroduction" id="addfintroduction" style="width: 212px"
							onblur="checkfintroduction()"></textarea>
						<!-- 									<input type="text" name="fintroduction" class="layui-input"
										id="adduserPwd" value=""> -->
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label" style="width: 118px"
						id="addfrecepettype1">接收类型</label>
					<div class="layui-input-inline">
						<input type="text" name="frecepettype" class="layui-input"
							id="addfrecepettype" value="" style="width: 212px"
							placeholder="请输入接收类型" onblur="checkfrecepettype()">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label" style="width: 118px">环境图片</label>
					<div class="layui-input-block">
						<input type="file" name="fenvimageurl" style="width: 212px">
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label" style="width: 118px"
						id="addfservices1">服务细则</label>
					<div class="layui-input-inline">
						<input type="text" name="fservices" class="layui-input"
							id="addfservices" value="" style="width: 212px"
							placeholder="请输入服务细则" onblur="checkfservices()">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label" id="fexperience1"
						style="width: 118px">养宠经验</label>
					<div class="layui-input-inline">
						<input type="text" name="fexperience" class="layui-input"
							id="fexperience0" value="" placeholder="请输入养宠年数"
							onblur="checkfexperience()" style="width: 212px">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="button" class="layui-btn layui-btn-normal"
							id="addsubbtn" lay-submit="" lay-filter="demo2"
							onclick="checkForm()"
							style="margin-left: -50px; padding-left: 22px; padding-right: 22px;">申请</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<!-- 添加按钮弹出层 -->

	<!-- footer开始 -->
	<jsp:include page="footer.jsp"></jsp:include>
	<!-- footer结束 ---wwb -->
	<!--start-smoth-scrolling-->
	<script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event) {
				event.preventDefault();
				$('html,body').animate({
					scrollTop : $(this.hash).offset().top
				}, 1000);
			});
		});
	</script>
	<!--start-smoth-scrolling-->
	<!-- <script type="text/javascript">
		$(document).ready(function() {
			/*
			var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear' 
			};
			 */

			$(document).UItoTop({
				easingType : 'easeOutQuart'
			});

		});
	</script> -->
	<a href="#home" id="toTop" class="scroll" style="display: block;">
		<span id="toTopHover" style="opacity: 1;"> </span>
	</a>
	<script type="text/javascript">
		layui
				.use(
						'laydate',
						function() {
							var form = layui.form, layer = layui.layer, layedit = layui.layedit, laydate = layui.laydate;

							//日期
							laydate.render({
								elem : '#date',
								type : 'datetime',
								min : getNowFormatDate() //调用getNowFormatDate() 设置预约时间最小为当前时间
							});
							laydate.render({
								elem : '#date1',
								type : 'datetime',
								min : getNowFormatDate()
							});
							function getNowFormatDate() {
								var date = new Date();
								var seperator1 = "-";
								var seperator2 = ":";
								var month = date.getMonth() + 1;
								var strDate = date.getDate();
								if (month >= 1 && month <= 9) {
									month = "0" + month;
								}
								if (strDate >= 0 && strDate <= 9) {
									strDate = "0" + strDate;
								}
								var currentdate = date.getFullYear() + seperator1 + month
										+ seperator1 + strDate + " " + date.getHours() + seperator2
										+ date.getMinutes() + seperator2 + date.getSeconds();
								return currentdate;
							}
						});
		/* 申请成为寄养家庭按钮点击弹出模态层 wwb 4.29 */
		layui.use('form', function() {
			var form = layui.form;
		$('#applybtn').on('click', function() {
			var islogin=${user!=null};
			if(islogin){
				var fuid=${user!=null?user.uid:0};
				var ulevel=${user!=null?user.ulevel:0};
				if(ulevel==1){
					layui.use('layer', function() {
						var layer = layui.layer;
						layer.open({
							type : 1,
							title : "Application of foster families",
							skin : 'layui-layer-rim', //加上边框
							area : [ '500px', '500px' ], //宽高
							content : $("#adduserinfo"),
						});
					});
					form.render;
				}else if(ulevel==2){
					layui.use('layer', function() {
						var layer = layui.layer;
						layer.msg('Already a foster family');
					});
				}else{
					layui.use('layer', function() {
						var layer = layui.layer;
						layer.msg('Non-administrator operation');
					});
				}
				/* $.ajax({
					'type' : 'get',
					'url' : '../fosterFamilyByfuid?fuid='+fuid,
					'success' : function(cm) {
						//console.log(cm.msg);
						if (cm.msg == "不存在") {
							layui.use('layer', function() {
								var layer = layui.layer;
								layer.open({
									type : 1,
									title : "Application of foster families",
									skin : 'layui-layer-rim', //加上边框
									area : [ '500px', '500px' ], //宽高
									content : $("#adduserinfo"),
								});
							});
						} else {
							layui.use('layer', function() {
								var layer = layui.layer;
								layer.msg('Already a foster family');
							});
						}

					}
				});
				form.render; */
			}else{
				layui.use('layer', function() {
					var layer = layui.layer;
					layer.msg('Please login first');
				});
			}
			
		})
	})
	function checkForm() {
			var flag_checkfexperience = checkfexperience();
			var flag_checkfintroduction = checkfintroduction();
			var flag_checkfrecepettype = checkfrecepettype();
			var flag_checkfservices = checkfservices();
			if (flag_checkfexperience && flag_checkfintroduction
					&& flag_checkfrecepettype && flag_checkfservices) {

				var form = new FormData(document.getElementById("addmyform"));
				$.ajax({
					'type' : 'post',
					'url' : '../fosterFamilyApply',
					'data' : form,
					'processData' : false,
					'contentType' : false,
					'success' : function(cm) {
						layer.msg(cm.msg, {
							time : 2000
						}, function() {
							if (cm.msg == "已申请") {
								layer.closeAll();
								//table.reload('testReload');//重新加载列表
							}else if(cm.msg == "正在审核中，勿重复提交"){
								layer.closeAll();
							}
						})
					}
				});
			}

		}
	</script>
	<!-- 首页预约寄养 -->
	<script type="text/javascript">
		layui.use('table', function() {
			var table = layui.table;
			var form = layui.form;
			<%-- var user="<%=session.getAttribute("user")%>"; --%>
				$('#orderadd').on('click', function() {
					if(${!empty user}){
					//  将时间转为毫秒数 通过计算获得时间差去得到预约天数  
		 				 var date1 = new Date($("#date").val());
						var date2 = new Date($("#date1").val());
						var days = parseInt((date2 - date1) / (1000 * 60 * 60 * 24));
						if(days==0){
							days=1;
						}
						console.log(days); 
						//根据天数获取押金 总金额 以及结算金额
						var deposit = (days * 100) / 2;
						var finapay = (days * 100) / 2;
						var total = days * 100;
						var order = {
							'oid' : 0,
							'odays' : days,
							'ouid' : '${user.uid}',
							'ofuname' : '${user.uname}',
							'otuname' : '魔方宠物寄养公司',
							'odeposit' : deposit,
							'ofinapay' : finapay,
							'ototal' : total,
							'opetname' : $("#opetname").val(),
							'opettype' : $("#opettype").val(),
							'ostatus' : 0,
							'opetstatus' : $("#opetstatus").val(),
							'ostdate' : $("#date").val(),
							'oenddate' : $("#date1").val()
						};
						 console.log(order); 
						 
						// 预约寄养的表单不能为空，且预约寄养日期不能小于结束日期，成功则跳转到支付页面
						 if($("#opetname").val()!=""&&$("#date").val()!=""&&$("#date1").val()!=""){
							 if($("#date").val()>$("#date1").val()){
								 layer.msg("预约寄养日期不能小于结束日期",{
										time : 2000
									});
							 }else{
								 window.localStorage.setItem('order',JSON.stringify(order));
								 location.href="${pageContext.request.contextPath}/frontdevel/appliy/index.jsp";
							 }
							
						 }else{
							 layer.msg("请填写完整",{
									time : 2000
								});
						 }
					}else{
						 layer.msg("请登录",{
								time : 2000
							});
					}
					
					
						 
					
				}); 
			


		});
	</script>
</body>
</html>